import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { registerApplication, start } from 'single-spa'

Vue.config.productionTip = false

async function loadScript(url) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    script.src = url
    script.onload = resolve
    script.onerror = reject
    document.head.appendChild(script)
  })
}

// singleSpa缺陷 不够灵活 不能动态加载JS文件
// 样式不隔离 全局对象 没有JS沙箱机制

registerApplication(
  'myVueApp',
  async () => {
    // systemJS
    console.log('load')
    await loadScript(`http://localhost:10000/js/chunk-vendors.js`)
    await loadScript(`http://localhost:10000/js/app.js`)
    return window.singleVue // bootstrap mount unmount
  },
  // 用户切换到/vue的路径下,我们需要加载刚才定义子应用
  (location) => location.pathname.startsWith('/vue')
)

start()

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')
